/**
  学习目标：使用Action传值
*/
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';

export default function App() {
  const [show, setShow] = useState(true);

  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>

      <h2>{count * 2}</h2>
      <button onClick={() => dispatch({ type: 'add' })}>点击+1</button>
      <button onClick={() => dispatch({ type: 'des' })}>点击-1</button>

      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 1. action对象使用payload属性传参 */}
      {/* 👍 建议：使用payload作为传参的属性名； 不建议：👎自定义传参的属性名 */}
      <button onClick={() => dispatch({ type: 'add', payload: 10 })}>+10</button>
      <button onClick={() => dispatch({ type: 'des', payload: 10 })}>-10</button>
    </div>
  );
}
